<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <script src="./lib/vue.min.js"></script>
</head>
<body>
<!--Vue实例所控制的这个元素区域，就是我们的V-->
<div id="app">
    <input type="button" value="浪起来" @click="lang">
    <input type="button" value="低调" @click="stop">
    <h4>{{msg}}</h4>
</div>
<script>
    //注意：在VM实例中,如果想要获取data上的数据，或者想要调用methods中的方法，必须通过this.数据属性名 或者 this.方法名来
    //进行访问，这里的this,就表示我们new出来的VM实例对象
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '猥琐发育，别浪~~!',
            intervalId: null    // 在data上定义 定时器Id
        },
        methods: {
            lang() {
                if (this.intervalId != null) return;
                this.intervalId = setInterval(() => {
                    var start = this.msg.substring(0, 1)
                    var end = this.msg.substring(1)
                    this.msg = end + start
                }, 400)
                // 注意：VM实例，会监听自己身上 data 中所有的数据的改变，只要数据一发生改变，
                // 就会自动把最新的数据，从data上同步到页面中去
            },
            stop() {
                clearInterval(this.intervalId)
                // 每当清除了定时器之后，需要重新把intervalId置为null
                this.intervalId = null;
            }
        }
    })
</script>
</body>
</html>
